<template>
  <div class="add" ref="add">
    <header-text></header-text>
    <div class="adduser">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="400px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="角色名称" prop="name">
          <el-select v-model="ruleForm.name" placeholder="请选择角色名称">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item) of Role_list"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          ></el-tree>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import HeaderText from "../../components/from/HeaderText";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        type: []
      },
      rules: {
        name: [
          { required: true, message: "请输入一个角色名称", trigger: "change" }
        ]
      },
      Role_list: [], //可选择角色列表
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  components: {
    HeaderText
  },
  mounted() {
    this.menuAdminList();
    this.roleAdminOption();
  },
  methods: {
    //获取后台菜单列表
    menuAdminList() {
      this.$api
        .menuAdminList({
          token: this.publick.token()
        })
        .then(res => {
          console.log(res);
          this.ment_list = res.data;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取可选择角色列表
    roleAdminOption() {
      this.$api
        .roleAdminOption({
          token: this.publick.token()
        })
        .then(res => {
          this.Role_list = [];
          let data = res.data;
          for (let i in data) {
            console.log(i + ";" + data[i]);
            let pamas = {
              value: i,
              label: data[i]
            };
            this.Role_list.push(pamas);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          this.$api
            .roleAdminAdd({
              role_name: this.ruleForm.name,
              rules: this.$refs.tree.getCheckedKeys(),
              token: this.publick.token()
            })
            .then(res => {
              this.$message({
                type: "success",
                message: res.message
              });
              //成功后刷新数据
              this.menuAdminList();
              this.roleAdminOption();
            })
            .catch(res => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>

<style scoped>
.add {
  width: 100%;
  height: 89vh;
  overflow: auto;
  background: #eff2f7;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5vh;
}

.line {
  text-align: center;
}
.uplod {
  width: 100%;
  min-height: 10vh;
  display: flex;
  justify-content: flex-start;
  margin-left: 5%;
}
/* 图像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-upload__tip {
  color: red;
}
</style>
